  <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="/Public/mui/css/mui.min.css">
	<style type="text/css">
		.mui-content {
			word-break: break-all;
		}
		
		.shop-goods {
		    word-break: break-all;
		    margin-top: 5px;
		    margin-left: 5px;
			margin-right: 5px;
		}
		
		.shop-goods .goods {
			height: 265px;
			background-color: #fff;
			padding: 4px;
			margin-bottom: 6px;
		}
	
		.shop-goods .goods-name{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #333;
			padding-left: 5px;
		}
		.shop-goods .goods-price {
			padding-left: 5px;
			color: hotpink;
		}
		.goods-img{
			width: 100%;
			height: 200px;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #36373C;color: #fff">
	<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
	<h1 id="title" class="mui-title" style="color: #fff;">商品列表</h1>
</header>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
	<!--数据列表-->
	<div class="mui-scroll">
		<div class="mui-row shop-goods" id="goods-content">
	       <!-- <div class="mui-col-sm-6 mui-col-xs-6 goods">
	            <img src="/Public/images/shop/goods-1.jpg" class="goods-img"/>
	            <p class="goods-name">哦阿娇佛啊额就发阿哥aeafaffaf</p>
	            <span class="goods-price">￥15</span>
	       </div>--> 		
	    </div>
	</div>
</div>

<script src="/Public/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/Public/layui/layui.js"></script>
<script src="/Public/js/jquery.min.js"></script>	
<script>
    layui.use('laytpl', function () {
    	var laytpl = layui.laytpl;
    	var p = 1;
    	var deceleration = mui.os.ios?0.003:0.0009;
        mui('.mui-scroll-wrapper').scroll({
            bounce: true,
            indicators: false, //是否显示滚动条
            deceleration:deceleration
        });
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					contentnomore:'没有更多数据了',
					callback: function() {
						var self =this;
						getData({p:p}, function(res){
							p++;
							if(res.data.length === 0) {
								self.endPullupToRefresh(true);
							}
							var html = renderData(res);
							$('#goods-content').append(html);
							self.endPullupToRefresh();
						});
					}
				}
			}
		});
		
		//id为dom的id self为当前刷新对象 res为返回的数据
        function renderData(res) {
            if (res.data.length == 0) {
                
                return;
            }
          	var html = [
          		'<div class="mui-col-sm-6 mui-col-xs-6 goods" data-id = "{{d.id}}">',
          		'<img src="{{d.goods_img}}" class="goods-img"/>',
            	'<p class="goods-name">{{d.goods_name}}</p>',
                '<span class="goods-price">￥{{d.price}}</span>',
        		'</div>',
          	]
          	var afterHtml = '';
          	$.each(res.data, function(i, n){
          		console.log(n);
          		var h = '';
			  	laytpl(html.join('')).render(n, function(s){
                	afterHtml += s;
            	});
			});
			           
        	return afterHtml;
        }
		
		mui("#goods-content").on('tap','.goods',function(){
		  	var goods_id = $(this).data('id');
		  	location.assign('/index.php/Home/Shop/detail/goods_id/'+goods_id);
		}) 
		
		
		function getData(data,success) {
            $.ajax({
                type: "POST",
                url: '/index.php/Home/Shop/getAjaxData',
                dataType: 'json',
                timeout: 10000,
                data:data ,
                success: success
            });
        }
		
	})
</script>
</body>

</html>